{% extends 'base.html' %}
{% load mytags %}
{% block self_head_css_js %}
    <script src="/static/layer/layer.js"></script>
    <script src="/static/js/base.js"></script>
    <script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/static/plugins/datatables/dataTables.bootstrap.css"></script>
{% endblock %}
{% block content %}

    <script>
        window.onload=init;
        function init() {
            var box = document.getElementById("delivery");
            box.className="active";
            var box2 = document.getElementById("delivery");
            box2.className="active";
        }
    </script>
<style type="text/css">
    #progress_bar
    {
        width:132px;
        border: solid 1px;
        background-color: aliceblue;
        height:17px;
    }
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
    </section>

    <!-- Main content -->
    <section class="content">
        <form action="" method="post" id="project_form">
                {% csrf_token %}
            <div class="box">
                <div class="box-header">
                    <div class="btn btn-group" style="padding-left: 0">
						 <a id="deliadd" style="display: none;" href="{% url 'delivery_add' %}"><li class="btn btn-success" ><b>添加项目</b></li></a>
                  </div>
                </div>
            <div class="col-md-5">

                <label for="page_len">
                    <select name="page_len" id="page_len" class="form-control m-b input-sm" onchange="change_info()">
                        {% ifequal page_len '10' %}
                            <option value="10" selected>10</option>
                        {% else %}
                            <option value="10">10</option>
                        {% endifequal %}
                        {% ifequal page_len '20' %}
                            <option value="20" selected>20</option>
                        {% else %}
                            <option value="20">20</option>
                        {% endifequal %}
                        {% ifequal page_len '50' %}
                            <option value="50" selected>50</option>
                        {% else %}
                            <option value="50">50</option>
                        {% endifequal %}
                        {% ifequal page_len '100' %}
                            <option value="100" selected>100</option>
                        {% else %}
                            <option value="100">100</option>
                        {% endifequal %}
                        {% ifequal page_len '200' %}
                            <option value="200" selected>200</option>
                        {% else %}
                            <option value="200">200</option>
                        {% endifequal %}
                    </select>
                            </label>
            </div>

                <!-- /.box-header -->
                <div class="box-body">
                  <table class="table table-striped table-bordered" id="projectform">
                      <thead>
                        <tr>
                            <th>
                                <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('project_form')">
                            </th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Progress</th>
                            <th>Policy</th>
                            <th>Action</th>
                        </tr>
                      </thead>
                            <tbody>
                            {% for project in deploys.object_list %}
                                <tr class="even gradeX">
                                    <td><input type="checkbox" id="id" class="i-checks" value="{{ project.id }}" name="id" /></td>
                                    <td>{{ project.job_name }} </td>
                                    <td>
                                            <i class="fa fa-circle" aria-hidden="true" style="color:#2D93CA;"></i>
                                    </td>
                                    <td>
                                    {% if project.status == False %}
                                        <div id="progress_bar_{{ project.job_name.id }}" style="display:none;width:132px;border: solid 1px;background-color: aliceblue;height:17px;">
                                            <div id="pb_{{ project.job_name.id }}" style="background-color: deepskyblue;height:15px; width: 0;"></div>
                                        </div>
                                    {% else %}
                                        <div id="progress_bar_{{ project.job_name.id }}" style="display:block;width:132px;border: solid 1px;background-color: aliceblue;height:17px;">
                                            <div id="pb_{{ project.job_name.id }}" style="background-color: deepskyblue;height:15px; width: 0;"></div>
                                        </div>
                                    {% endif %}

                                    </td>
                                    <td>{{ project.deploy_policy }} </td>
                                    <td>
                                        <a id="delideploy" style="display: none; float: left; margin: auto;" href="#"><li onclick="return deploy(this.value);" class="btn btn-sm btn-default" value="{{ project.job_name_id }}">部署</li></a>
                                        <a id="delilog" style="display: none; float: left; margin: auto;" href="#"><li style="list-style-type:none" class="btn btn-sm btn-default" onclick="return tanchu(this.value)" value="{{ project.job_name_id  }}">日志</li></a>
                                        <a id="delilogshistory" style="display: none; float: left; margin: auto;" href="#"><li style="list-style-type:none" class="btn btn-sm btn-default" onclick="return logs_history(this.value)" value="{{ project.job_name_id  }}">历史</li></a>
                                        <a id="deliedit" style="display: none; float: left; margin: auto;" href="#"><li onclick="return tanchu_edit(this.value) " value="{{ project.job_name_id  }}" class="btn btn-sm btn-default">编辑</li></a>
                                        <a id="delitaskstop" style="display: none; float: left; margin: auto;" href="#"><li onclick="return taskstop(this.value);" class="btn btn-sm btn-default" value="{{ project.job_name_id }}">清理</li></a>
                                        <a id="delidel" style="display: none; float: left; margin: auto;" href="{% url "delivery_del"%}?project_id={{ project.id }}" onclick="return confirm('确认删除项目吗？')"><span class="btn btn-sm btn-danger ">删除</span></a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                  </table>
                <div class="row">
                    {% include 'paginator.html' %}
                </div>
                  <div class="btn-group">
{#                      <input type="button" id="project_del" class="btn btn-danger"   name="del_button" value="删除项目"/>#}
                  </div>
                </div>
            </div>
        </form>
    </section>

</div>
<script>
  $(function () {
    $('#projectform').DataTable({
        //"aLengthMenu":[5,10],
        "paging": false,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": false,
        "bAutoWidth": false
    });
  });
</script>

<script>
    $('#project_del').click(function () {
        var project_id_all = getIDall();
        if (project_id_all == ''){
            alert("请至少选择一行!");
            return false;
        }
        if (confirm("确定删除?")) {
            $.ajax({
                type: "post",
                data: {project_id_all: project_id_all,csrfmiddlewaretoken: '{{ csrf_token }}'},
                url: "{% url 'delivery_del' %}",
                success: function () {
                    parent.location.reload();
                }
            });
        }
    });
</script>
<script>
function tanchu(n){
    layer.open({
    type: 2,
    title: 'Deploy Log View',
    closeBtn: 1,
    area: ['600px', '400px'],
    shadeClose: true, //点击遮罩关闭
    content: ['/delivery/delilog/' + n]
  });
}
function logs_history(n){
    layer.open({
    type: 2,
    title: 'Logs View',
    closeBtn: 1,
    area: ['600px', '400px'],
    shadeClose: true, //点击遮罩关闭
    content: ['/delivery/delilogshistory/' + n]
  });
}
</script>
{#用于接收asset_edit.html中layui子层的传值#}
<input id="handle_status" value="" hidden="hidden">
<script>
function tanchu_edit(n){
  layer.open({
  type: 2,
  title: '信息修改',
  area: ['600px', '450px'],
  shadeClose: true, //点击遮罩关闭
  content: ['/delivery/deliedit/' + n],
  end:function(){
        var handle_status = $("#handle_status").val();
        if ( handle_status == '1' ) {
            layer.msg('保存成功！',{
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
        } else if ( handle_status == '2' ) {
            layer.msg('修改失败！',{
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
        }
    }
  });
}
</script>
<script>
function deploy(args) {
    if (confirm("确定部署？")) {
        var pb = document.getElementById("progress_bar_"+args);
        pb.style.display = "block";
        $.get("/delivery/delideploy/"+args+"/",function(data,status){
        });
    }
}
function taskstop(args) {
    if (confirm("确定清理任务状态？")) {
        var pb = document.getElementById("progress_bar_"+args);
        pb.style.display = "none";
        $.get("/delivery/delitaskstop/"+args+"/",function(data,status){
        });
    }
}
</script>
<script>
    var v1 = window.setInterval("status()",6000);

    function status() {
        {% for project in all_project %}
            $.get("/delivery/delistatus/{{ project.job_name_id }}/",function(data){
                var ret = JSON.parse(data);
                var width = parseInt(ret.bar_data);
                var progress_bar = document.getElementById("pb_{{ project.job_name.id }}");
                progress_bar.style.width = width+"px";
            });
        {% endfor %}
    }
</script>
<script>
    function change_info(){
        var args = $("#project_form").serialize();
        window.location = "{% url 'delivery_list' %}?" + args
    }
</script>
{% endblock %}
